<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap - 增删改查</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="./js/bootstrap.min.js"></script>
</head>
<body>
    <!-- 表格 -->
    <div class="container" style="padding-top: 40px;">
        <div class="form-group">
            <div class="row">
                <div class="col-md-8">
                    <input type="text" class="form-control swich" />
                </div>
                <div>
                    <input type="text" class="form-control userAge" />
                </div>
                <div class="col-md-3">
                    <button class="btn btn-danger sreach">搜索</button>
                    <button class="btn btn-default add" data-toggle="modal" data-target="#myModel">增加</button>
                </div>
            </div>
        </div>
        <table class="table table-bordered text-center">
            <tr>
                <td>编号</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>操作</td>
            </tr>
            <tbody id="showMessage">

            </tbody>
        </table>
        <div class="row">
            <div id="show_page_info" class="col-md-4" style="line-height: 80px">
                
              当前<span id="pageNumNow"></span>页,总<span id="AllPageNum"></span>页,总共<span id="AllUserNum"></span>条记录
            </div>
            <div id="show_page_nav" class="col-md-8 text-right">
              <nav aria-label="Page navigation">
                <ul class="pagination" id="pagination">
                  <li class="disabled" jumpPageNum="1">
                    <a href="javascript:;">首页</a>
                  </li>
                  <li class="disabled" jumpPageNum="1">
                    <a href="javascript:;"><span>&laquo;</span></a>
                  </li>
                  <li jumpPageNum="${pageInfo.getPageNum()+1 }">
                    <a href="javascript:;"><span>&raquo;</span></a>
                  </li>
                  <li jumpPageNum="${pageInfo.getPages() }">
                    <a href="javascript:;">末页</a>
                  </li>
                </ul>
              </nav>
            </div>
          </div>
    </div>
    
    <!-- 修改的模态框 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">修改信息</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <input type="text" placeholder="编号" id="reusrnum" class="form-control" disabled/>
                        </div>
                        <div class="form-group">
                            <input type="text" placeholder="名字" id="reusrname" class="form-control" />
                        </div>
                        <div class="form-group">
                            <input type="text" placeholder="年龄" class="form-control" id="rescore" />
                        </div>
                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary olk" data-dismiss="modal">提交更改</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal -->
    </div>
    <!-- 增加的模态框 -->
    <div class="modal fade" id="myModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">增加信息</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <input type="text" placeholder="编号" id="reusrnum" class="form-control" />
                        </div>
                        <div class="form-group">
                            <input type="text" placeholder="名字" id="reusrname" class="form-control" />
                        </div>
                        <div class="form-group">
                            <input type="text" placeholder="年龄" class="form-control" id="rescore" />
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary aad" data-dismiss="modal">增加信息</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal -->
    </div>
    <script>
        var name = "";
        var age = 0;
        var pageNum = 1;
        $(function(){
            onleadOk(name,age,pageNum);
        })
            function onleadOk(name, age, pageNum) {
            $.ajax({
                url: 'http://localhost:18081/20241001_war/user/getPage',
                type: 'get',
                data: {
                    name: name,
                    age: age,
                    pageNum: pageNum
                },
                dataType: 'json',
                success: function (data) {
                    console.log(data);
                    var tbody = $('#showMessage');
                    tbody.empty(); // 清空现有的表格内容
                    $('#pageNumNow').html(data.pageNum);
                    $('#AllPageNum').html(data.pages); // 假设 pages 是总页数
                    $('#AllUserNum').html(data.total);
                    data.list.forEach(function (item) {
                        var row = `<tr>
                                    <td>${item.id}</td>
                                    <td>${item.name}</td>
                                    <td>${item.age}</td>
                                    <td>
                                        <button class="btn btn-primary rev" data-toggle="modal" data-target="#myModal">修改</button>
                                        <button class="btn btn-danger del" onclick="deleteUser(${item.id})">删除</button>
                                    </td>
                                </tr>`;
                        tbody.append(row);
                    });
                    updatePagination(data); // 更新分页控件
                }
            });
        }

        // 更新分页控件
        function updatePagination(data) {
            var pagination = $('#pagination');
            pagination.empty();
            if (data.isFirstPage) {
                pagination.append(`<li class="disabled" jumpPageNum="1">
                                        <a href="javascript:;">首页</a>
                                    </li>
                                    <li class="disabled" jumpPageNum="1">
                                        <a href="javascript:;"><span>&laquo;</span></a>
                                    </li>`);
            } else {
                pagination.append(`<li jumpPageNum="1">
                                        <a href="javascript:;">首页</a>
                                    </li>
                                    <li jumpPageNum="${data.prePage}">
                                        <a href="javascript:;"><span>&laquo;</span></a>
                                    </li>`);
            }
            data.navigatepageNums.forEach(function (page) {
                pagination.append(`<li jumpPageNum="${page}" ${page === data.pageNum ? 'class="active"' : ''}>
                                        <a href="javascript:;">${page}</a>
                                    </li>`);
            });
            if (data.isLastPage) {
                pagination.append(`<li class="disabled" jumpPageNum="${data.pages}">
                                        <a href="javascript:;"><span>&raquo;</span></a>
                                    </li>
                                    <li class="disabled" jumpPageNum="${data.pages}">
                                        <a href="javascript:;">末页</a>
                                    </li>`);
            } else {
                pagination.append(`<li jumpPageNum="${data.nextPage}">
                                        <a href="javascript:;"><span>&raquo;</span></a>
                                    </li>
                                    <li jumpPageNum="${data.pages}">
                                        <a href="javascript:;">末页</a>
                                    </li>`);
            }
        }
        
        //删除的功能
        $(document).on("click", ".del", function () {
            $(this).parents("tr").remove()
        })
        function deleteUser(id){
            alert(id)
            $.ajax({
                url:'http://localhost:18081/20241001_war/user/deleteUsers',
                type:'post',
                data:{
                    id:id
                },
                success:function(data){
                        console.log(data)
                      if(data===1){
                        alert('删除成功')
                        onleadOk(name,age,1); // 刷新列表
                      }  
                }
            })
        }
        //改的功能
        var _this = null
        $(document).on("click", ".rev", function () {
            var _arr = []
            _this = $(this).parents("tr")
            $(this).parents("tr").find("td:not(:last)").each(function () {
                _arr.push($(this).text())
            })
            $("#myModal").find("input").each(function (i) {
                $(this).val(_arr[i])
            })
        })

        $(document).on("click", ".olk", function () {
            var _arr = []
            $("#myModal").find("input").each(function () {
                _arr.push($(this).val())
            console.log(_arr)
            })
            $.ajax({
                url: 'http://localhost:18081/20241001_war/user/updateUsers',
                type: 'post',
                contentType: 'application/json', // 设置Content-Type
                data: JSON.stringify(_arr), // 发送JSON格式的数据
                success: function(data) {
                    console.log(data);
                    if (data === 1) {
                        alert('修改成功');
                        onleadOk(name, age,1); // 刷新列表
                    }
                }
            });
            _this.find("td:not(:last)").each(function (i) {
                $(this).text(_arr[i])
            })
        })
        //增加的功能
        // 在点击增加按钮时处理数据并发送
        $(document).on("click", ".aad", function () {
            var _arr = [];
            $("#myModel").find("input").each(function () {
                _arr.push($(this).val());
                $(this).val("")
            });

            // 使用JSON.stringify来确保发送的是一个JSON字符串
            $.ajax({
                url: 'http://localhost:18081/20241001_war/user/addUsers',
                type: 'post',
                contentType: 'application/json', // 设置Content-Type
                data: JSON.stringify(_arr), // 发送JSON格式的数据
                success: function (data) {
                    console.log(data);
                    if (data === 1) {
                        // var str = '<tr><td>' + _arr[0] + '</td><td>' + _arr[1] + '</td><td>' + _arr[2] + '</td><td><button class="btn btn-primary rev" data-toggle="modal" data-target="#myModal">修改</button> <button class="btn btn-danger del">删除</button></td></tr>';
                        // $("#showMessage").append(str); // 更新UI
                        alert('新增成功！')
                        onleadOk(name,age,1); // 刷新列表
                    }
                }
            });
        });
        //查的功能
        $(".sreach").click(function () {
            var oS = $(".swich").val()
            name = oS
            onleadOk(oS,age,1)
        })



        // 分页控件的点击事件处理
        $(document).on('click', '#pagination li', function () {
            var pageNum = $(this).attr('jumpPageNum');
            if ($(this).hasClass('disabled')) {
                return;
            }
            onleadOk(name, age ,pageNum);
        });

        // 首页点击事件处理
        $(document).on('click', '.pagination li[jumpPageNum="1"]', function () {
            onleadOk(name, age,1);
        });

        // 上一页点击事件处理
        $(document).on('click', '.pagination li[jumpPageNum!="1"] .prev', function () {
            var currentPage = parseInt($('#pageNumNow').text());
            if (currentPage > 1) {
                onleadOk(name, age, currentPage - 1);
            }
        });

        // 下一页点击事件处理
        $(document).on('click', '.pagination li[jumpPageNum!="1"] .next', function () {
            var currentPage = parseInt($('#pageNumNow').text());
            var totalPages = parseInt($('#AllPageNum').text());
            if (currentPage < totalPages) {
                onleadOk(name, age, currentPage + 1);
            }
        });
    </script>
</body>
</html>
